<!DOCTYPE html>
<html
  lang="en"
  xmlns:th="http://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = ${theme.config.categories.categories_title ?: '全部分类'} + '-' + ${site.title},htmlType = categories,header = null,leftSidebar = true,content = ~{::content}, head = null, footer = null)}"
>
  <th:block th:fragment="content">
    <body>
      <div id="Joe" th:with="categories = ${categoryFinder.listAll()}">
        <th:block th:replace="~{modules/macro/navbar :: navbar}" />
        <th:block th:if="${theme.config.beauty.enable_big_banner}">
          <th:block th:replace="~{modules/macro/big_banner :: big_banner(${title})}" />
        </th:block>
        <div
          class="joe_container joe_main_container page-categories"
          th:classappend="|${theme.config.theme.enable_show_in_up ?'animated showInUp' : ''} ${theme.config.aside.aside_position == 'left' ? 'revert' : ''}|"
        >
          <div class="joe_main">
            <div class="joe_index">
              <div class="joe_index__title">
                <ul class="joe_index__title-title pl-15">
                  <li class="item active">
                    [[${theme.config.categories.categories_title ?: '全部分类'}]]
                    <span class="totals">[[${#lists.size(categories)}]]</span>
                  </li>
                </ul>
              </div>
              <div class="joe_index__hot categories">
                <ul
                  th:class="'joe_index__hot-list'+${theme.config.categories.categories_type != 'card' ? '-tag' : ''}+' animated fadeIn'"
                >
                  <th:block th:if="${theme.config.categories.categories_type=='card'}">
                    <li class="item" th:each="category : ${categories}">
                      <a class="link" th:title="${category.spec.displayName}" th:href="${category.status.permalink}">
                        <figure class="inner">
                          <th:block th:if="${theme.config.categories.enable_categories_post_num}">
                            <th:block th:replace="~{modules/macro/post_num :: post_num}" />
                          </th:block>
                          <th:block
                            th:with="postCover = ${theme.config.basic.enable_random_img_api ? theme.config.basic.random_img_api_url+'?pageid='+category.metadata.name : theme.config.categories.categories_default_img}"
                          >
                            <img
                              class="image lazyload"
                              width="100%"
                              height="120"
                              th:data-src="${category.spec.cover ?: postCover}"
                              th:src="${theme.config.categories.categories_lazyload_img}"
                              th:alt="${category.spec.displayName}"
                            />
                          </th:block>
                          <figcaption class="title">[[${category.spec.displayName}]]</figcaption>
                        </figure>
                      </a>
                    </li>
                  </th:block>
                  <th:block th:if="${theme.config.categories.categories_type == 'tag'}">
                    <li class="item" th:each="category : ${categories}">
                      <a class="link" th:title="${category.spec.displayName}" th:href="${category.status.permalink}">
                        <span>[[${category.spec.displayName}]]</span>
                        <th:block th:if="${theme.config.categories.enable_categories_post_num}">
                          <th:block th:replace="~{modules/macro/post_num :: post_num}" />
                        </th:block>
                      </a>
                    </li>
                  </th:block>
                </ul>
              </div>
            </div>
          </div>
          <th:block th:if="${theme.config.aside.enable_aside} and ${theme.config.aside.enable_categories_aside}">
            <th:block th:replace="~{modules/common/aside :: aside}" />
          </th:block>
        </div>
        <th:block th:replace="~{modules/common/actions :: actions}" />
        <th:block th:if="${theme.config.footer.enable_footer}">
          <th:block th:replace="~{modules/common/footer :: footer}" />
        </th:block>
      </div>
      <th:block th:replace="~{modules/macro/tail :: tail}" />
    </body>
  </th:block>
</html>
